<template>
  <div class="tooltip">
    <span style="margin-right:4px;">{{props.title}}</span>
    <el-tooltip effect="dark" placement="top">
      <template #content>
        <div style="max-width: 220px; margin-bottom: -6px;">
          <p style="font-size: 12px; line-height: 1.6; margin-bottom: 6px;" v-for="item in props.content" :key="item.id">{{item.text}}</p>
        </div>
      </template>
      <el-image src="/static/question.png" style="width:16px;height:16px"></el-image>
    </el-tooltip>
  </div>
</template>
<script setup lang="tsx">
import { reactive, ref, watch, computed } from 'vue'

type contentType = {
  id: number,
  text: string
}
interface Props {
  modelValue: string,
  title: string,
  content: contentType[]
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    title: '',
    content: ()=>[]
})

const emit = defineEmits(['update:modelValue'])


</script>
<style scoped lang="scss">
  .tooltip {
    display: flex;
    align-items: center;

  }
</style>
